<!--loading加载-->
<template>
  <div class="loading">
    <div class="shadow">
      <div class="loader">
        <div class="mask"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Loading",
};
</script>

<style>
.shadow {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  margin-top: -50px;
  margin-left: -50px;
  box-shadow: -2px 2px 10px 0 rgba(0, 0, 0, 0.5), 2px,
    -2px 10px 0 rgba(255, 255, 255, 0.5);
}

.loader {
  background: -webkit-linear-gradient(left, skyblue 50%, #fafafa 50%);
  height: 100px;
  width: 100px;
  border-radius: 50%;
  animation: time 8s steps(500, start) infinite;
}

.mask{
    border-radius: 100% 0 0 100%/50% 0 0 50%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    animation: mask 8s steps(250,start) infinite;
    transform-origin: 100% 50%;
}

@keyframes time{
    100%{
        transform: rotate(360deg);
    }
}

@keyframes mask{
    0%{
        background:#fafafa;
        transform: rotate(0deg);
    }

    50%{
        background: #fafafa;
        transform: rotate(-180deg);
    }

    /* 50.01%{
        background: skyblue;
        transform: rotate(0deg);
    } */

    100%{
        background: skyblue;
        transform: rotate(-180deg);
    }
}
</style>